<template>
    <view class="questionBankWrap">
        <MyNavbar :loginData="loginData" />
        <view style="padding:0 30rpx 32rpx 30rpx">
            <u-input placeholder="请输入关键字" prefixIcon="search"
                prefixIconStyle="font-size: 32px;color: #909399; padding:0 14rpx"
                customStyle="border-radius: 24rpx; height: 60rpx; margin-top: 20rpx" @confirm="onSearch" v-model="searchValue"></u-input>
        </view>
        <scroll-view :scroll-y="true" class="scrollStyle" @scrolltolower="onScrollToLower"
            :style="{ maxHeight: `calc(100vh - ${(safeAreaInsets.bottom * 2) + 602}rpx )`, height: `calc(100vh - ${(safeAreaInsets.bottom * 2) + 602}rpx )` }">
            <view v-if="planList.length">
                <view v-for="item in planList" :key="item.subjectUuid">
                    <QuestionItem :info="item" @callback="(type)=>onSelectItem(type,item)" @onRefresh="onRefresh"/>
                </view>
                <u-loadmore :status="loadStatus" @loadmore="onLoadmore" />
            </view>
            <view v-else style="margin-top: 20%">
                <u-empty text="暂无数据" mode="list"></u-empty>
            </view>
        </scroll-view>
        <view class="bottomBtn" @click="isPopup = true">
            <image src="../../static/images/question/addTk.svg"
                style="width: 36rpx;height: 36rpx; margin-right: 22rpx;" />
            <text>新增题库</text>
        </view>
        <BotMenu :isPopup="isPopup" @close="quName = ''; isPopup = false" title="题库名称" :showCancel="true">
            <view class="addNewQb">
                <u--input placeholder="请输入题库名称" style="height: 120rpx;" :border="'none'" :clearable="true"
                    v-model="quName"></u--input>
            </view>
            <view class="okBtn center" @click="addQuestionBank">
                确定
            </view>
        </BotMenu>
        <MTabBar :value="1" />
    </view>
</template>

<script>
import { saveSubject, pageSubject,toTop} from "../../myQuestionBank/services/myQuestionBankService"
import { notificationFun } from "../../utils/PrjUtils";
export default {
    data() {
        return {
            loginData: {},
            safeAreaInsets: {},
            isPopup: false,
            queryData: {
                queryKey: "",
                pageNo: 1,
                pageSize: 10
            },
            // 新增题库名称
            quName: "",
            // 数据源
            planList: [],
            //加载前值为loadmore，加载中为loading，没有数据为nomore
            loadStatus: 'loadmore',
            // 搜索
            searchValue:""
        }
    },
    onShow() {
        if (uni.getStorageSync('appKey')) {
            this.loginData = {
                ...uni.getStorageSync('loginData'),
            };
        } else {
            this.loginData = {};
        }
        this.onRefresh()

    },
    onPullDownRefresh() {
    },
    onReachBottom() {

    },
    watch: {
        queryData: {
            handler: function (val, oldVal) {
                this.onGetListData(val)
            },
            deep: true
        }
    },
    computed: {},
    beforeMount() {
        uni.getSystemInfo({
            success: (res) => {
                this.safeAreaInsets = res.safeAreaInsets
            }
        })
    },
    methods: {
        onLeftClick() {
            if (!uni.getStorageSync('appKey')) {
                uni.navigateTo({
                    url: '/pages/login/login'
                })
            }
        },
        //加载更多触发
        onLoadmore() {
            console.log("onLoadmore")
            // this.planList = [...this.planList, ...[2, 3, 4]]
            this.queryData = {
                ...this.queryData,
                pageNo: this.queryData.pageNo + 1
            }
        },
        // 底部菜单
        onSelectItem(type,record) {
            switch (type) {
                case "导出题库":

                    break;
                case "添加章节":
                    uni.navigateTo({
                        url: `/myQuestionBank/addQuestionBank?info=${encodeURIComponent(JSON.stringify({...record}))}`
                    })
                    break;
                case "录入试题":
                    uni.navigateTo({
                        url: `/myQuestionBank/testQuestionsInput?info=${encodeURIComponent(JSON.stringify({...record}))}`
                    })
                    break;
                default:
                    uni.navigateTo({
                        url: '/myQuestionBank/addQuestionBank'
                    })
                    break;
            }
        },
        // 初始化数据
        onGetListData(queryData) {
            this.loadStatus = 'loading'
            pageSubject(queryData).then(res => {
                let newListData = queryData.pageNo === 1 ? [...res.datas] : [...this.planList, ...res.datas]
                // console.log(newListData)
                if (newListData.length >= res.totalCount) {
                    this.loadStatus = 'noMore'
                } else {
                    this.loadStatus = 'loadmore'
                }
                this.planList = newListData
            }).catch(err => {
                this.loadStatus = 'loadmore'
            })
        },
        onScrollToLower(e) {
            if (this.loadStatus === 'loadmore') {
                this.queryData = {
                    ...this.queryData,
                    pageNo: this.queryData.pageNo + 1
                }
            }
        },
        // 搜索
        onSearch() {
            this.queryData = {
                ...this.queryData,
                queryKey: this.searchValue,
                pageNo: 1
            }
        },
        // 新增题库
        async addQuestionBank() {
            if(!this.quName){
                return notificationFun("未输入题库名称，暂无法新增题库！")
            }
            let res = await saveSubject({ name: this.quName })
            notificationFun("操作成功")
            this.quName=""
            this.isPopup=false
            this.onRefresh()
        },
        // 刷新
        onRefresh(){
            this.queryData = { ...this.queryData,pageNo:1 }
        }
    }
}
</script>

<style lang="scss" scoped>
page {
    background-color: #fff !important;
}

.questionBankWrap {
    position: relative;
    height: 100vh;
    background-color: #fff !important;

    .scrollStyle {
        box-sizing: border-box;
    }

    .addNewQb {
        box-sizing: border-box;
        padding: 30rpx;
        background: #F9F9F9;
        margin: 0 30rpx;
        border-radius: 24rpx;
        margin-bottom: 34rpx;
    }

    .okBtn {
        padding: 32rpx;
        border-top: 1px solid #EEEEEE;
    }

    .bottomBtn {
        width: calc(100% - 60rpx);
        /* margin-left: 30rpx; */
        margin: 40rpx 0 0 30rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 90rpx;
        box-shadow: 0px 1px 8px 0px #00000014;
        border-radius: 24rpx;
        /* position: absolute; */
        /* bottom: 160rpx; */
        /* left: 30rpx; */
        bottom: 160rpx;
        background-color: #37B874;
        color: #fff;
    }

}
</style>